import { Component, OnInit, SimpleChanges } from '@angular/core';

import { RequestService } from '../../services/request.service';
import { map, filter } from 'rxjs/operators';

@Component({
  selector: 'app-lifecycle',
  templateUrl: './lifecycle.component.html',
  styleUrls: ['./lifecycle.component.less']
})
export class LifecycleComponent implements OnInit {

  public msg: string = '改变的数据'

  constructor(public request: RequestService) { 
    console.log('%c constructor', 'color: deeppink')
  }

  ngOnChanges(changes: SimpleChanges): void {
    //Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.
    //Add '${implements OnChanges}' to the class.
    console.log('%c ngOnChanges', 'color: deeppink')
  }

  ngOnInit(): void {
    console.log('%c ngOnInit', 'color: deeppink')

    // 用工具方法对返回的数据进行处理
    const stream: any = this.request.getRxjsData()
    // stream
    //   .pipe(
    //     filter((val: number) => {
    //       if (val % 2 == 0) return true
    //     })
    //   )
    //   .subscribe(data => {
    //     console.log(data)
    //   })
    
    // stream
    //   .pipe(
    //     map((val: number) => {
    //       return val * val
    //     })
    //   )
    //   .subscribe(data => {
    //     console.log(data)
    //   })
  }

  ngDoCheck(): void {
    //Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.
    //Add 'implements DoCheck' to the class.
    console.log('%c ngDoCheck', 'color: deeppink')
  }

  ngAfterContentInit(): void {
    //Called after ngOnInit when the component's or directive's content has been initialized.
    //Add 'implements AfterContentInit' to the class.
    console.log('%c ngAfterContentInit', 'color: deeppink')
  }

  ngAfterContentChecked(): void {
    //Called after every check of the component's or directive's content.
    //Add 'implements AfterContentChecked' to the class.
    console.log('%c ngAfterContentChecked', 'color: deeppink')
  }

  ngAfterViewInit(): void {
    //Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
    //Add 'implements AfterViewInit' to the class.
    console.log('%c ngAfterViewInit', 'color: deeppink')
  }

  ngAfterViewChecked(): void {
    //Called after every check of the component's view. Applies to components only.
    //Add 'implements AfterViewChecked' to the class.
    console.log('%c ngAfterViewChecked', 'color: deeppink')
  }

  ngOnDestroy(): void {
    //Called once, before the instance is destroyed.
    //Add 'implements OnDestroy' to the class.
    console.log('%c ngOnDestroy', 'color: deeppink')
  }

}
